<template>
  <div class="person-safe">
    <div class="safe-header clearfix">
      <div class="safe-img fl"></div>
      <div class="safe-header-word fl">
        <div class="safe-value">安全等级{{'一般'}}</div>
        <div class="safe-value-word">您与安全达人还有一些距离</div>
      </div>
    </div>

    <div class="safe-card clearfix">
      <div class="safe-block fl">
        <div class="safe-content">
          <div class="safe-border-img safe-border-img-open"></div>
          <div class="safe-icon safe-icon-iphone"></div>
          <div class="safe-content-name">手机号</div>
          <div class="safe-content-word">{{ getUser.mobile | hideMobile }}</div>
          <div @click="openPhoneDialog" class="safe-content-btn">修改手机号</div>
        </div>
      </div>
      <div class="safe-block fl">
        <div class="safe-content">
          <div class="safe-border-img safe-border-img-open"></div>
          <div class="safe-icon safe-icon-password"></div>
          <div class="safe-content-name">登录密码</div>
          <div class="safe-content-word">定期更换密码有助于账户安全</div>
          <div @click="openPassWordDialog" class="safe-content-btn">修改登录密码</div>
        </div>
      </div>
      <div class="safe-block fl">
        <div class="safe-content">
          <div class="safe-border-img safe-border-img-noopen"></div>
          <div class="safe-icon safe-icon-renzheng"></div>
          <div class="safe-content-name">实名认证</div>
          <div class="safe-content-word">
            {{ getUser.idNo ? '账号已实名认证':'账号未实名认证' }}
          </div>
          <div @click="enterCerPage" class="safe-content-btn">
            {{ getUser.idNo ? '账号已实名认证':'账号未实名认证' }}
          </div>
        </div>
      </div>
      <div class="safe-block fl">
        <div class="safe-content">
          <div class="safe-border-img safe-border-img-noopen"></div>
          <div class="safe-icon safe-icon-shouquan"></div>
          <div class="safe-content-name">账号授权管理</div>
          <div class="safe-content-word">绑定、解绑账户</div>
          <div @click="enterAuthor" class="safe-content-btn">账号授权管理</div>
        </div>
      </div>
    </div>

    <!-- 手机号弹窗 -->
    <el-dialog
      title="修改手机号"
      :visible.sync="phoneDialogIshow"
      width="800px"
      :before-close="closedPhoneDialog"
    >
      <el-form :model="phoneForm" size="medium" :rules="phoneRules" ref="phoneForm" label-width="150px">
        <el-form-item label="手机号：" prop="mobile">
          <el-input v-model="phoneForm.mobile"></el-input>
        </el-form-item>
         <el-form-item label="短信验证码：" prop="verCode">
          <el-input class="code-input" v-model="phoneForm.verCode"></el-input>
          <span @click="getMobileCode" v-show="!isPendding" class="code-btn fr">获取短信验证码</span>
          <span v-show="isPendding" class="code-btn fr">{{ timeOutsecond }}</span>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closedPhoneDialog">取 消</el-button>
        <el-button type="primary" @click="submitPhoneForm">确 定</el-button>
      </span>
    </el-dialog>

    <!-- 修改密码弹窗 -->
    <el-dialog
      title="修改密码"
      :visible.sync="passwordDialogIsShow"
      width="800px"
      :before-close="closedPassWordDialog"
    >
      <el-form
        :model="passwordForm"
        size="medium"
        :rules="passwordRules"
        ref="passwordForm"
        label-width="120px"
      >
        <el-form-item label="原密码" prop="oldPass">
          <el-input show-password v-model="passwordForm.oldPass"></el-input>
        </el-form-item>
         <el-form-item label="新密码" prop="newPass">
          <el-input show-password v-model="passwordForm.newPass"></el-input>
        </el-form-item>
         <el-form-item label="确定密码" prop="confirmPass">
          <el-input show-password v-model="passwordForm.confirmPass"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="closedPassWordDialog">取 消</el-button>
        <el-button type="primary" @click="passwordDialogIsShow = false">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
import { checkMobile ,sendMobileCode ,updatePhone ,getUserInfo} from '@/api'

export default {
  data() {
    var validateMobile = (rule, value, callback) => {
      if (/^1[345789]\d{9}$/.test(value)) {
        callback();
      }  else {
        callback(new Error('请输入正确手机号'));
      }
    };
    var validateMobileIsRepeat = async (rule, value, callback) => {
      let result =  await this.getMobileIsRepeat()
      if (result) {
        callback();
      }else{
        callback(new Error('手机号已经注册过'));
      }
    };
    var validateEnAndNum = (rule, value, callback) => {
      var reg = new RegExp(/^[0-9a-zA-Z]*$/g);
      if ( !reg.test(value) ) {
        callback(new Error('请输入数字或字母'));
      } else {
        callback();
      }
    };

    var validateOldPass = async (rule, value, callback) => {
      let result =  await this.getOldpass()
      if (result) {
        callback();
      }else{
        callback(new Error('原密码输入有误'));
      }
    };

    var validateConfirmPass =  (rule, value, callback) => {
      if (value == this.passwordForm.newPass) {
        callback();
      }else{
        callback(new Error('两次密码输入不一致'));
      }
    };

    return {
      phoneDialogIshow: false,
      phoneForm: {
        mobile: "",
        verCode: ""
      },
      phoneRules: {
        mobile: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          { validator: validateMobile, trigger: 'blur' },
          { validator: validateMobileIsRepeat, trigger: 'blur' },
        ],
        verCode:[
          { required: true, message: "请输入验证码", trigger: "blur" },
          { validator: validateEnAndNum, trigger: 'blur' },
        ]
      },
      isPendding:false,
      timeOutsecond:120,
      timer:null,
      passwordDialogIsShow: false,
      passwordForm: {
        oldPass: "",
        newPass: "",
        confirmPass:"",
      },
      passwordRules: {
        oldPass: [
          { required: true, message: "请输入原密码", trigger: "blur" },
          { validator: validateOldPass, trigger: 'blur' },
        ],
        newPass: [
          { required: true, message: "请输入新密码", trigger: "blur" },
          { min: 6, max: 50, message: "长度在 6到 50 个字符", trigger: "blur" },
          { validator: validateEnAndNum, trigger: 'blur' },
        ],
        confirmPass: [
          { required: true, message: "请输入确认密码", trigger: "blur" },
          { validator: validateConfirmPass, trigger: 'blur' },
        ],
      }
    };
  },
  computed:{
    getUser(){
      return this.$store.state.user;
    }
  },
  mounted(){
    this.getUserInforMation()
  },
  methods: {
    getUserInforMation(){
      let url = '/sys/sysMember/getMember';
      getUserInfo(url).then(res=>{
        if(res.data.code == 200){
          this.$store.commit('setUserinfo',{
            id:res.data.data.id,
            name:res.data.data.loginName,
            mobile:res.data.data.mobile,
            idNo:res.data.data.idNo,
          })
        }
      })
    },
    closedPhoneDialog(){
      this.phoneDialogIshow = false;
    },
    openPhoneDialog() {
      this.phoneDialogIshow = true;
      this.phoneForm = {  mobile: "", verCode: "" };
      if(this.$refs.phoneForm){
        this.$refs.phoneForm.clearValidate();
      }
      if(this.timer){
        window.clearInterval(this.timer);
        this.timer = null;
      }
      this.isPendding = false;
    },
    async getMobileIsRepeat(){
      let url = '/sys/sysMember/checkMobile';
      let formData = new FormData();
      formData.append('mobile',this.phoneForm.mobile);
      let isTrue = false;
      await checkMobile(url,formData).then(res=>{
        if(res.data){ // 返回值为布尔
          isTrue =  true;
        }else{
         isTrue = false;
        }
      })
      return isTrue;
    },
    getMobileCode(){
      this.$refs.phoneForm.validateField('mobile',(string)=>{
        if(!string){
          this.sendSms()
          if(this.timer){
            window.clearInterval(this.timer)
          }else{
            this.isPendding = true;
            var second = 120;
            this.timer= window.setInterval(()=>{
              second--
              this.timeOutsecond = "获取"+second+ 's'
              if(second == 1){
                window.clearInterval(this.timer)
                this.timer = null;
                this.timeOutsecond ="获取";
                this.isPendding = false;
              }
            },1000)
          }
        }
      });
    },
    sendSms(){
      let url = '/sys/sysMember/sendChangeSms';
      let formData = new FormData();
      formData.append('mobile',this.phoneForm.mobile);
      sendMobileCode(url,formData).then(res=>{
        if(res.data){
          // console.log('发送验证码成功')
        }else{
          this.$message({
            type: "error",
            duration: 3000,
            message: "发送验证码失败"
          });
        }
      })
    },
    submitPhoneForm(){
      this.$refs.phoneForm.validate((boolean)=>{
        if(boolean){
          let url = '/sys/sysMember/saveMemberInfo';
          let formData  = new FormData();
          formData.append('loginName',this.getUser.name);
          formData.append('id',this.getUser.id);
          formData.append('mobileCode',this.phoneForm.verCode);
          formData.append('mobile',this.phoneForm.mobile);
          updatePhone(url,formData).then(res=>{
            if(res.data.code == 200){
              this.phoneDialogIshow = false;
              if(this.timer){
                window.clearInterval(this.timer);
                this.timer = null;
              }
              this.$message({
                type: "success",
                duration: 3000,
                message: "修改成功"
              });
            }else{
              this.$message({
                type: "error",
                duration: 3000,
                message: "修改失败请重试"
              });
            }
          })
        }

      })
    },

    closedPassWordDialog(){
      this.passwordDialogIsShow = false;
    },
    openPassWordDialog() {
      this.$message({
        type: "error",
        duration: 3000,
        message: "暂不支持修改密码功能"
      });
      return false;
     // this.passwordDialogIsShow = true;
    },

    async getOldpass(){
      let url = '/sys/accountSecurity/updateNext';
      let formData = new FormData();
      formData.append('loginName',this.getUser.name);
      formData.append('password',this.passwordForm.oldPass);
      let isTrue = false;
      await checkMobile(url,formData).then(res=>{

        // console.log(res,'oopop')

        if(res.data){ // 返回值为布尔
          isTrue =  true;
        }else{
         isTrue = false;
        }
      })
      return isTrue;
    },
    enterCerPage() {
      this.$router.push({ name: "certification" });
    },
    enterAuthor() {
      this.$message({
        type: "error",
        duration: 3000,
        message: "功能暂未开通"
      });
    },
  }
};
</script>


<style lang="scss" scoped>
.person-safe {
  height: 1040px;
  background-color: #ffffff;
  border-radius: 10px;
  .safe-header {
    height: 200px;
    padding: 0 40px;
    background: url("../assets/image/safe_bg.png");
    background-repeat: no-repeat;
    background-size: 100% 100%;

    .safe-img {
      height: 180px;
      width: 200px;
      margin-top: 10px;
      background: url("../assets/image/safe_flag.png");
      background-repeat: no-repeat;
      background-size: 100% 100%;
    }

    .safe-header-word {
      width: calc(100% - 200px);
      height: 200px;
      font-size: 22px;
      padding-left: 40px;
      box-sizing: border-box;

      .safe-value {
        margin-top: 45px;
      }
      .safe-value-word {
        margin-top: 45px;
        color: #c9c9c9;
      }
    }
  }

  .safe-card {
    padding: 20px;

    .safe-block {
      height: 360px;
      width: 50%;
      padding: 5px;
      box-sizing: border-box;

      .safe-content {
        height: 350px;
        border: 2px solid #ebebeb;
        position: relative;

        .safe-content-name {
          font-size: 22px;
          text-align: center;
          margin-top: 40px;
        }
        .safe-content-word {
          color: #9f9f9f;
          font-size: 14px;
          text-align: center;
          margin-top: 40px;
        }
        .safe-content-btn {
          margin: 0 auto;
          background: #eee;
          border: 1px solid #f8f8f8;
          width: 130px;
          height: 35px;
          line-height: 35px;
          font-size: 16px;
          text-align: center;
          margin-top: 30px;
          cursor: pointer;
        }
      }
    }
  }
}
.safe-border-img {
  position: absolute;
  right: 0px;
  height: 50px;
  width: 50px;
}

.safe-border-img-open {
  background: url("../assets/image/safe_open.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

.safe-border-img-noopen {
  background: url("../assets/image/safe_noopen.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
</style>
